<script setup lang="ts">
import {
  apiDeviceDelete,
  apiDeviceGet,
  apiDevicePost,
  apiDevicePut,
} from "@/tool/request";
import { onMounted, ref } from "vue";
import Upload_com from "./upload_com.vue";
import Delete_button from "./delete_button.vue";
import { deviceType } from "@/tool/types";
import { showSuccessToast } from "vant";
const props = defineProps<{
  file_id: number;
}>();

const device = ref<deviceType>({
  id: -1,
  name: "",
  value: 0,
  context: "",
  url: "",
  file_id: props.file_id,
  specialty: "",
});
const device_arr = ref<deviceType[]>([]);
const tags = ref<string[]>([]);
const newTag = ref("");

const addTag = () => {
  if (newTag.value.trim() && !tags.value.includes(newTag.value.trim())) {
    tags.value.push(newTag.value.trim());
    newTag.value = "";
  }
};

const removeTag = (index: number) => {
  tags.value.splice(index, 1);
};

const getData = () => {
  apiDeviceGet(props.file_id).then((res) => {
    device_arr.value = res.data;
  });
};

onMounted(() => {
  getData();
});


const success = (url: string) => {
  device.value.url = url;
};
const submit = () => {
  console.log(device.value);
  device.value.specialty = tags.value.join(",");
  if (device.value.id > 0) {
    apiDevicePut(device.value).then((res) => {
      showSuccessToast(res.data);
    });
  } else {
    apiDevicePost(device.value).then((res) => {
      showSuccessToast(res.data);
      device.value = {
        id: -1,
        name: "",
        value: 0,
        context: "",
        url: "",
        file_id: props.file_id,
        specialty: "",
      };
      getData();
    });
  }
};

const deletF = () => {
  apiDeviceDelete(device.value.id).then(() => {
    getData();
    device.value = {
      id: -1,
      name: "",
      value: 0,
      context: "",
      url: "",
      file_id: props.file_id,
      specialty: "",
    };
  });
};
</script>

<template>
  <div class="device">
    <van-form >
      <van-field
        name="name"
        v-model="device.name"
        label="菜品"
        placeholder="请输入菜品名称"
      ></van-field>
      <van-field
        name="context"
        v-model="device.context"
        label="描述"
        placeholder="请输入菜品描述"
      ></van-field>
      <van-field
        name="value"
        v-model.number="device.value"
        label="价格"
        placeholder="请输入菜品价格"
      ></van-field>
      <van-field name="img" label="文件上传">
        <template #input>
          <Upload_com @success="success" :url="device.url" />
        </template>
      </van-field>

      <div class="tag-input">
        <van-field v-model="newTag" placeholder="输入口味" @keyup.enter="addTag">
          <template #button>
            <van-button size="small" type="primary" @click="addTag">添加</van-button>
          </template>
        </van-field>
      </div>
      <div class="tags-container">
        <van-tag
          v-for="(tag, index) in tags"
          :key="index"
          closeable
          size="medium"
          type="primary"
          @close="removeTag(index)"
        >
          {{ tag }}
        </van-tag>
      </div>

      <van-button round block type="primary"   @click="submit"> 提交 </van-button>
    </van-form>
    <Delete_button
      v-if="device.id > 0"
      style="position: absolute; right: 10px; top: 10px"
      @delete="deletF"
    />

    <div class="device_list">
      <span v-for="item in device_arr" @click="device = item">
        {{ item.name }} {{ item.id }}
      </span>
    </div>

    <!-- {{ device_arr }} -->
    <!-- <Upload_com
      v-if="menu_item.id > 0"
      :url="menu_item.url"
      @success="success"
      style="margin-top: 10px"
    /> -->
  </div>
</template>

<style lang="scss" scope>
.device {
  .device_list {
    span {
      background: #fff;
      padding: 5px 10px;
      margin-right: 15px;
      cursor: pointer;
    }
    margin-top: 10px;
  }
  .tags-container {
    margin-top: 10px;
    .van-tag {
      margin-right: 8px;
      margin-bottom: 8px;
    }
  }
  .tag-input {
    margin-top: 10px;
  }
  position: relative;
}
</style>
